<template>
  <h2>当前求和为：{{ sum }}</h2>
  <button @click="sum++">sum+1</button>
  <hr>
  <h2>{{ msg }}</h2>
  <button @click="msg+='!'">改变msg</button>
  <hr>
  <h2>姓名：{{person.name}}</h2>
  <h2>年龄：{{person.age}}</h2>
  <h2>薪资：{{person.jobs.j1.salary}}K</h2>
  <button @click="person.name+='~'">修改姓名</button>
  <button @click="person.age++">增长年龄</button>
  <button @click="person.jobs.j1.salary++">增长薪资</button>
</template>

<script>
import {reactive, ref, watch, watchEffect} from "vue";

export default {
  name: "Demo",
  components: {},
  props: [],
  emits: [], // 用于注册VC的自定义事件，可不写，但会报警
  // region Vue2写法
  /*watch: {
    /!*'sum'(valNew, valOld){
      console.log('sum的值变化了', valNew, valOld);
    }*!/
    'sum': {
        immediate: false,
        deep:true,
        handler(valNew, valOld){
          console.log('sum的值变化了', valNew, valOld);
        }
    }
  },*/
  // endregion
  setup() {
    let sum = ref(0);
    let msg = ref('Hello');
    let person = reactive({
      name: '张三',
      age: 18,
      jobs:{
        j1:{
          salary:20
        }
      }
    });

    /*watch(sum, (newVal, oldVal) => {
      console.log('sum变化了', newVal, oldVal);*/
    
    watchEffect(() => {
      // console.log(`watchEffect被调用了${sum.value}`);
      // console.log(`watchEffect被调用了${msg.value}`);
      console.log(`watchEffect被调用了${person.name}`);
    })

    return {
      sum,
      msg,
      person
    }
  },
}
</script>

<style scoped>

</style>